<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content selecte_temp_list">
      <div class="fixed-explain">
        <e-heading grade='1'>训练计划模板</e-heading>
        <span class="form-help">请选择要使用的训练计划模板</span>
      </div>
      <el-form v-bind="getFormProps()" :inline="true">
        <el-form-item label="">
          <el-input size="small" v-model.trim="query.topic" placeholder="请输入课时主题名称"></el-input>
        </el-form-item>
        <el-button size="small" type="primary-plain" native-type="submit">搜索</el-button>
      </el-form>
      <div v-if="plan_list.list && plan_list.list.length > 0">
        <div v-for="(item, index) in plan_list.list" :key="index" class="list-dis">
          <el-table 
            v-bind="getTableProps()"
            border
            :data="[item]" 
            tooltip-effect="dark">
            <el-table-column 
              prop="topic"
              label="课时主题" 
              width="320"
              :show-overflow-tooltip="true"
              align="center">
              <template slot-scope="scope">
                {{ scope.row.topic }}
              </template>
            </el-table-column>
            <el-table-column 
              prop="userName"
              label="编辑人" 
              width="140"
              :show-overflow-tooltip="true"
              align="center">
              <template slot-scope="scope">
                {{ scope.row.userName }}
              </template>
            </el-table-column>
            <el-table-column 
              prop="createTime"
              label="提交时间" 
              width="130"
              align="center">
              <template slot-scope="scope">
                {{new Date(scope.row.createTime).format('yyyy-MM-dd hh:mm')}}
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center">
              <template slot-scope="scope">
                <el-button type="link" @click="handleDetail(scope.$index, scope.row, 2)">详情</el-button>
                <el-button type="link" @click="handleSelect(scope.$index, scope.row, $event)" :loading="loading">选择</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div> 
        <el-pagination
          v-bind="getPaginationProps(plan_list)"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          >
        </el-pagination>
      </div>
      <!--无数据提示-->
      <e-placeholder text="暂无数据" src="/static/images/training/no_course.png" v-else></e-placeholder>
    </div>
  </div>
</template>

<script>
import { pagingList } from 'utils/mixins'
import api from 'api/trainingProgram'
import {mapGetters} from 'vuex'

export default {
  mixins: [pagingList],
  computed: {
    ...mapGetters({
      plan_list: 'plan_list'
    })
  },
  data () {
    return {
      loading: false,
      query: this.getQuery({authStatus: '2'}),
      topicName: '',
      roleType: ''
    }
  },
  created () {
    this.roleType = localStorage.getItem('role_type')
  },
  methods: {
    fetch (query) {
      this.$store.dispatch('plan_list', query)
    },
    handleDetail (index, row, status) { // 详情
      this.$router.push({path: '/training/trainingprogram/plan/detail', query: {id: row.id, status: status}})
    },
    handleSelect (index, row, event) { // 选择模板
      /**
       * 此接口支持 POST-新增 PUT-修改
       * 请求方法更加是否有id处理 在api里面统一处理 此处无需处理
       */
      let subData = {
        id: this.$route.query.id || '',
        scheduleId: this.$route.query.scheduleId,
        drillPlanId: row.id
      }
      api.selectedTemp(subData, {context: event.target, successMsg: '选择模板成功'}).then(() => {
        history.back()
      })
    }
  }
}
</script>

<style lang="scss">
  .selecte_temp_list {
    .fixed-explain {
      position: relative;
      .form-help {
        position: absolute;
        top: 50px;
        left: 0px;
      }
    }
    .list-dis {
      width:100%;
      padding-bottom: 30px;
    }
    .el-table {
      border: 1px solid #f2f2f2;
    }
  }
</style>
